<style lang="scss">
  .issue-container {
    margin-top: 10px;
    .el-table {
      height: calc(100vh - 260px)!important;
      margin-bottom: 14px;
    }
    .paste-btn-div {
      margin-top: 5px;
      text-align: center;
    }
    .gdxx-div {
      outline: 1px dotted #cccccc;
      padding-top: 7px;
      margin-top: 7px;
    }
    .my_model_style {
      .el-dialog__header {
        padding: 15px;
        // background-color: #ECF5FF;
        text-align: center;
        font-size: 18px !important;
      }
    }
    .conditions-box {
      // float: right;
    }
    .search-box .conditions-box {
      margin-right: 15px;
    }
  }
</style>

<template>
  <!-- 工单维护-已下发 -->
  <el-container class="issue-container">
    <!-- 顶栏容器 -->
    <el-header>
      <!-- 查询框 -->
      <div class="search-box">
        <div class="conditions-box">
          <el-button type="primary"
                     size="small"
                     icon="el-icon-circle-plus-outline"
                     plain
                     @click="addFn">添加</el-button>
        </div>
      </div>
    </el-header>
    <!-- 主要区域容器 -->
    <el-main>
      <el-table :data="tableItem.list"
                stripe
                border
                :height="tableHeight"
                v-loading="loadingTable">
        <el-table-column prop="date"
                         label="日期"
                         align="left"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="order"
                         label="排名"
                         align="center"></el-table-column>
        <el-table-column prop="deptTotal"
                         label="总件数"
                         align="center"></el-table-column>
        <el-table-column prop="satisfactionRate"
                         label="高新区满意率"
                         align="center"></el-table-column>
        <el-table-column prop="replyCycle"
                         label="高新区回复周期"
                         align="center"></el-table-column>
        <el-table-column prop="rejectionRate"
                         label="高新区退件率"
                         align="center"></el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="tableItem.pageNum"
                     :page-size="tableItem.pageSize"
                     :page-sizes="[20, 30, 50, 100]"
                     :total="tableItem.total"
                     layout="total, sizes, prev, pager, next, jumper"
                     style="float: right;"></el-pagination>
    </el-main>
    <el-dialog :visible="dialogIssuedDetail"
               fullscreen
               :before-close="hideFn">
      <addDetail v-if="dialogIssuedDetail"
                 @hideFn="hideFn" />
    </el-dialog>
  </el-container>
</template>

<script>
  import addDetail from './add_detail'

  export default {
    name: 'service-issue',
    data () {
      return {
        // 年度列表
        yearList: [],
        // 来源列表
        sourceList: [],
        // 处室列表
        deptList: [],
        // 查询参数
        pageParam: {
          pageNum: 1,
          pageSize: 20,
        },
        loadingTable: false,
        // 表格高度
        tableHeight: -1,
        // 表格列表
        tableItem: [],
        // 已下发查看
        dialogIssuedDetail: false,
        fullScreen: true
      }
    },
    methods: {
      // 获取督办分页列表
      getIssuePage () {
        this.$axios.post('/dataHandle/getDataList', this.pageParam).then(rs => {
          if (rs) {
            this.tableItem = rs
            this.loadingTable = false
          }
        })
      },
      // 分页
      handleSizeChange (size) {
        this.pageParam.pageSize = size
        this.loadingTable = true
        this.getIssuePage()
      },
      // 分页
      handleCurrentChange (currentPage) {
        this.pageParam.pageNum = currentPage
        this.loadingTable = true
        this.getIssuePage()
      },
      // 添加工单
      addFn () {
        this.dialogIssuedDetail = true
      },
      // 关闭添加
      hideFn () {
        this.dialogIssuedDetail = false
        this.getIssuePage()
      }
    },
    components: {
      addDetail
    },
    created: function () {
      this.getIssuePage()
    }
  }
</script>
